<template>
	<view class="clerk">
		<view class="clerk_qq">
			<img src="../../static/search-icon.png" alt="">
			<input class="clerk_q1" type="text" placeholder="请输入客户姓名/手机号" >
			<button class="clerk_q2" @click="add_clientele">添加客户</button>
		</view>
		<view class='clerk_q3'>共计客户数量250人</view>
		<view class="clerk_text">
			<view class="clerk_textq">
				<h5 class="clerk_textq1">黄晓峰</h5>
				
			</view>
			
			<view class="clerk_textq">
				<span class="">手机号：</span>
				<span class="clerk_textq3">18339836339</span>
				<span class="">一键拨打</span>
				<button class="clerk_btn" @click="clerk_btn">删除</button>
			</view>
			<view class="clerk_textq">
				<span class="">店铺地址：</span>
				<span class="">东大街65号</span>
			</view>
		</view>
		<view v-show="gao" class="xiaogao">
			<view class="xiaogao1">
				<view class="">是否要删除</view>
				<view class="nanan">
					<button class="na" @click="gaogao">确定</button>
					<button class="na" @click="yaya">取消</button>
				</view>
				
			</view>
			
		</view>
						
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gao:false
			}
		},
		methods: {
			add_clientele(){
			uni.navigateTo({
				url: '/pages/gao/add_clientele'
			        });
			},
			clerk_btn(){
				console.log("15523");
				this.gao=true
			},
			gaogao(){
				this.gao=false
			},
			yaya(){
				this.gao=false
			}
			
			
		}
	}
</script>

<style>
	.clerk{
		width: 95%;
		margin: 0 auto;
	}
	.clerk_qq{
		display: flex;
		margin-top: 20px;
		
		
	}
	.clerk_q1{
		height: 44px;
		flex: 8;
		background-color: aliceblue;
		margin-right: 10px;
		padding-left: 40px;
		border-radius: 5px;
	}
	.clerk_q2{
		height: 44px;
		flex: 2;
		background-color:  #fccc04;
		font-size: 12px;
		line-height: 44px;
		padding: 0px 5px 0px 5px;
		
	}
	img{
		position: absolute;
		width: 30px;
		margin-top: 5px;
		margin-left: 5px;
		
	}
	.clerk_q3{
		margin-top: 10px;
		margin-bottom: 10px;
		color: red;
		font-weight: bold;
	}
	.clerk_text{
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		border-bottom: 1px solid black;
		
	}
	.clerk_textq{
		display: flex;
		margin-top: 5px;
		margin-bottom: 5px;
		
	}
	.clerk_textq1{
		margin-right: 30px;
	}
	.clerk_btn{
		position: absolute;
		right: 5%;
		
		
		background-color: red;
		color: white;
		height: 33px;
		line-height: 33px;
	}
	.clerk_textq3{
		margin-right: 10px;
		color: #fccc04;
	}
	.xiaogao{
		width: 40%;
		border: 1px solid black;
		padding:30px;		
		background-color: aliceblue;
		position: fixed;
		top: 50%;
		margin-left: 25%;
		transform: rotateY(-50%);
		
	}
	.nanan{
		display: flex;
		
	}
	.na{
		padding: 0;
		flex: 1;
	}
	
</style>